<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>音视频聊天</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        #localVideo, #remoteVideo {
            width: 320px;
            height: 240px;
            margin: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
        .video-container {
            display: flex;
            justify-content: center;
        }
        .controls {
            margin-top: 20px;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            margin: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

<h1>音视频聊天</h1>

<div class="video-container">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
</div>

<div class="controls">
    <button onclick="startVideoChat()">开始聊天</button>
    <button onclick="stopVideoChat()">结束聊天</button>
</div>

<script>
    let localStream = null;
    let remoteStream = null;
    let peerConnection = null;

    const localVideo = document.getElementById('localVideo');
    const remoteVideo = document.getElementById('remoteVideo');

    // 获取可用的摄像头和麦克风设备
    async function getDevices() {
        // 查询当前的摄像头权限状态
        const cameraPermission = await navigator.permissions.query({ name: 'camera' });
        const microphonePermission = await navigator.permissions.query({ name: 'microphone' });

        // 检查是否被拒绝
        if (cameraPermission.state === 'denied' || microphonePermission.state === 'denied') {
            console.log('权限被拒绝，请手动允许摄像头和麦克风访问');
            return;
        }

        // 获取所有设备
        const devices = await navigator.mediaDevices.enumerateDevices();
        devices.forEach(device => {
            console.log(device.kind, device.label, device.deviceId);
        });
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        const audioDevices = devices.filter(device => device.kind === 'audioinput');

        // 打印音视频设备
        console.log('视频设备:', videoDevices);
        console.log('音频设备:', audioDevices);

        // 选择默认设备
        const videoDeviceId = videoDevices.length > 0 ? videoDevices[0].deviceId : null;
        const audioDeviceId = audioDevices.length > 0 ? audioDevices[0].deviceId : null;

        return { videoDeviceId, audioDeviceId };
    }

    // 开始音视频聊天
    async function startVideoChat() {
        console.log('开始视频聊天');
        try {
            const { videoDeviceId, audioDeviceId } = await getDevices();

            if (videoDeviceId === null) {
                console.log('未找到视频设备');
                alert('未检测到摄像头设备');
                return;
            }
            if (audioDeviceId === null) {
                console.log('未找到音频设备');
                alert('未检测到麦克风设备');
                return;
            }

            // 请求音频和视频权限，指定设备ID
            const stream = await navigator.mediaDevices.getUserMedia({
                video: { deviceId: videoDeviceId ? { exact: videoDeviceId } : undefined },
                audio: { deviceId: audioDeviceId ? { exact: audioDeviceId } : undefined }
            });
            localStream = stream;
            localVideo.srcObject = localStream;

            // 这里模拟对等连接设置（本地视频和远程视频）
            // 真实应用中应该是通过 WebRTC 信令服务器来建立连接
            peerConnection = new RTCPeerConnection();
            localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

            // 监听远程流
            peerConnection.ontrack = event => {
                remoteStream = event.streams[0];
                remoteVideo.srcObject = remoteStream;
            };

            // 创建一个 offer 并发送给对方（这里需要配合信令服务器）
            const offer = await peerConnection.createOffer();
            await peerConnection.setLocalDescription(offer);

            // 模拟接受对方的 offer
            // 真实应用中应该通过 WebRTC 信令服务器来接收对方的信号
            await peerConnection.setRemoteDescription(offer);

        } catch (err) {
            console.error('获取媒体流失败', err);
        }
    }

    // 停止视频聊天
    function stopVideoChat() {
        console.log('结束视频聊天');
        if (peerConnection) {
            peerConnection.close();
            peerConnection = null;
        }

        if (localStream) {
            localStream.getTracks().forEach(track => track.stop());
            localStream = null;
        }

        localVideo.srcObject = null;
        remoteVideo.srcObject = null;
    }
</script>

</body>
</html>
